<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title></title>
    <script src='./vue.global.js'></script>
</head>
<body>
    <div id='app'>
        <custom-form @submit="onSubmit"></custom-form>
    </div>

    <script>
        const app = Vue.createApp({
            data(){
                return {}
            },
            methods:{
                onSubmit(e){
                    console.log("onSubmit",e);
                }
            },
            computed:{}
        })

        app.component("custom-form",{
            // emits:["submit"],
            emits:{
                //click事件不验证
                click:null,

                // 事件校验函数接收到事件携带的数据
                submit:(e)=>{
                    if(e.email && e.password){
                        // 事件校验通过
                        return true
                    }else{
                        console.error("submit事件必须携带邮箱与密码");
                        // 事件校验失败
                        return false
                    }
                }
            },

            methods:{
                sonSubmitForm(e){
                    console.log("sonSubmitForm",e);
                    this.$emit('submit',e)
                }
            },

            template:`
            <button @click="sonSubmitForm({name:'乌拉'})">click me</button>
            <button @click="sonSubmitForm({email:'12345@qq.com',password:'123456'})">click me</button>
            `
        })

        app.mount('#app')
    </script>
</body>
</html>